<template>
  <div class="bbx-box">
    <div class="bbx-sider">
      <div class="menu-item">
        <img class="menu-icon" src="~/assets/img/menu-icon.png" alt="" />
        <span class="title">百宝工具箱</span>
        <el-icon><ArrowRight /></el-icon>
      </div>
      <div class="fixed-menu-item">
        <el-icon style="font-size: 16px"><Ticket /></el-icon>
        <span class="title">购买/续费</span>
        <el-icon><ArrowRight /></el-icon>
      </div>
    </div>
    <div class="bbx-main">
      <div class="radio-btn-group">
        <el-radio-group fill="#32C7AA" v-model="classification" size="large">
          <el-radio-button
            v-for="(row, i) in tabList"
            :key="i"
            :label="row.label"
            :value="row.value"
          />
        </el-radio-group>
      </div>
      <div class="bbx-main-title">
        <CommonTitle line-color="#32C7AA">
          <template #title>
            <span style="margin-left: 10px">搞流量</span>
          </template>
          <template #subTitle>
            <span style="margin-left: 10px">免费搞流量就来犀牛百宝箱</span>
          </template>
        </CommonTitle>
      </div>
      <div class="bbx-main-list">
        <div
          class="bbx-main-list-item"
          @click="goDetail(i)"
          v-for="i in 5"
          :key="i"
        >
          <div class="top">
            <div class="tags">
              <div class="tag">推荐</div>
              <div class="tag">限时推荐</div>
            </div>
          </div>
          <div class="flag">免费试用</div>
          <div class="title">
            <img src="~/assets/img/huo.png" alt="" />
            <span>渠道权重提升</span>
          </div>
          <div class="desc">
            这是一款非常厉害的补单工具，有了他再也不担心降权的问题
          </div>
          <div class="footer">
            <span>适用：</span>
            <div class="images">
              <img src="~/assets/img/xhs.png" alt="" />
              <img src="~/assets/img/xhs.png" alt="" />
              <img src="~/assets/img/xhs.png" alt="" />
              <img src="~/assets/img/xhs.png" alt="" />
              <img src="~/assets/img/xhs.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="bbx-main-title">
        <CommonTitle line-color="#32C7AA">
          <template #title>
            <span style="margin-left: 10px">搞流量</span>
          </template>
          <template #subTitle>
            <span style="margin-left: 10px">免费搞流量就来犀牛百宝箱</span>
          </template>
        </CommonTitle>
      </div>
      <div class="bbx-main-list">
        <div class="bbx-main-list-item" v-for="i in 5" :key="i">
          <div class="top">
            <div class="tags">
              <div class="tag">推荐</div>
              <div class="tag">限时推荐</div>
            </div>
          </div>
          <div class="flag">免费试用</div>
          <div class="title">
            <img src="~/assets/img/huo.png" alt="" />
            <span>渠道权重提升</span>
          </div>
          <div class="desc">
            这是一款非常厉害的补单工具，有了他再也不担心降权的问题
          </div>
          <div class="footer">
            <span>适用：</span>
            <div class="images">
              <img src="~/assets/img/xhs.png" alt="" />
              <img src="~/assets/img/xhs.png" alt="" />
              <img src="~/assets/img/xhs.png" alt="" />
              <img src="~/assets/img/xhs.png" alt="" />
              <img src="~/assets/img/xhs.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="bbx-main-title">
        <CommonTitle line-color="#32C7AA">
          <template #title>
            <span style="margin-left: 10px">搞流量</span>
          </template>
          <template #subTitle>
            <span style="margin-left: 10px">免费搞流量就来犀牛百宝箱</span>
          </template>
        </CommonTitle>
      </div>
      <div class="bbx-main-list">
        <div class="bbx-main-list-item" v-for="i in 5" :key="i">
          <div class="top">
            <div class="tags">
              <div class="tag">推荐</div>
              <div class="tag">限时推荐</div>
            </div>
          </div>
          <div class="flag">免费试用</div>
          <div class="title">
            <img src="~/assets/img/huo.png" alt="" />
            <span>渠道权重提升</span>
          </div>
          <div class="desc">
            这是一款非常厉害的补单工具，有了他再也不担心降权的问题
          </div>
          <div class="footer">
            <span>适用：</span>
            <div class="images">
              <img src="~/assets/img/xhs.png" alt="" />
              <img src="~/assets/img/xhs.png" alt="" />
              <img src="~/assets/img/xhs.png" alt="" />
              <img src="~/assets/img/xhs.png" alt="" />
              <img src="~/assets/img/xhs.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Ticket, ArrowRight } from "@element-plus/icons-vue";
const classification = ref("");
const tabList = [
  {
    label: "全域电商",
    value: "",
  },
  {
    label: "淘宝",
    value: 0,
  },
  {
    label: "拼多多",
    value: 1,
  },
  {
    label: "京东",
    value: 2,
  },
  {
    label: "抖音",
    value: 3,
  },
  {
    label: "小红书",
    value: 4,
  },
  {
    label: "阿里巴巴",
    value: 5,
  },
];
const goDetail = (i) => {
  navigateTo(`/bbx/${i}`);
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
